<%--
  Created by IntelliJ IDEA.
  User: glls
  Date: 2022/3/31
  Time: 10:45
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function (){
            $("#btn").click(function (){
                var xmlHttp;

                if(window.XMLHttpRequest){
                    //有的浏览器 支持 这个对象直接new
                    xmlHttp = new XMLHttpRequest();
                }else{
                    // 不支持 简介创建这个对象
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                // 指定回调函数  监听请求的执行结果
                xmlHttp.onreadystatechange = function (){
                    if(xmlHttp.readyState==4 && xmlHttp.status==200){
                        //响应结束  并且 响应正常
                        var result = xmlHttp.responseText;

                        alert(result);
                        var obj = eval("("+result+")");
                        $("#name").val(obj.name);
                        $("#height").val(obj.height);
                        $("#phone").val(obj.phone);

                        alert(obj.hobby[0]);
                    }
                }

                xmlHttp.open("get","/getAjaxInfo2?name=浩林",true);
                //发送请求
                xmlHttp.send();
            });



            $("#btn2").click(function (){
                // get   post    ajax

                $.get("/getAjaxInfo2",{},function (data){
                    alert(data.name);
                    alert(data.height);

                    $("#name").val(data.name);
                    $("#height").val(data.height);
                    $("#phone").val(data.phone);
                },"json");


            });
            $("#btn3").click(function (){
                // get   post    ajax

                $.post("/getAjaxInfo3",{},function (data){

                    $("#name").val(data.name);
                    $("#height").val(data.height);
                    $("#phone").val(data.phone);
                },"json");


            });



            $("#btn4").click(function (){
                var json={name:'zs',age:34};
                alert(json);
                var str=JSON.stringify(json);   // 把js 对象 转为 字符串
                alert(str);
            });
        });

    </script>
</head>
<body>
 姓名：<input type="text" id="name" > <br>
 身高：<input type="text" id="height" > <br>
 电话：<input type="text" id="phone" > <br>


<button id="btn">原生的 ajax  获取信息</button>
 <br>
<button id="btn2">掌握  jquery 的 ajax的  get请求  获取信息 后台使用fastjson</button>
 <br>
<button id="btn3">掌握  jquery 的 ajax的  post 请求  获取信息 后台使用jackson</button>


 <br>

<button id="btn4">测试js对象转字符串</button>
</body>
</html>
